<template>
	<div class="login"  @keydown.enter="login()">
		<div class="middle">
			<h1 class="header">
				<img src="../assets/img/login_logo.png" width="64" height="64"/>
				石家庄城市级停车管理平台
			</h1>
			<div class="content">
				<div class="title">
					用户登录
				</div>
				<div class="loginForm">
					<el-form ref="form" :ref="'loginForm'" :model="formInline" :rules="rules" label-width="80px" label-position="top">
					  <el-form-item label="用户名" :class="{'is-error':userErr}" prop="userCode">
					    <el-input v-model.trim="formInline.userCode" @change="userErr=false"></el-input>
					    <i class="iconfont icon-yonghu" style="position: absolute; right: 0; top: 0; color: #B0BAC5;"></i>
					  </el-form-item>
					  <el-form-item label="密码" :class="{'is-error':userErr}" prop="password">
					  	<el-input v-model.trim="formInline.password" type="password" @change="userErr=false"></el-input>
					  	<i class="iconfont icon-mima" style="position: absolute; right: 0; top: 0; color: #B0BAC5;"></i>
					  </el-form-item>
					  <el-form-item label="验证码" :class="{'is-error':codeErr}" prop="validationCode">
					  	<el-input v-model.trim="formInline.validationCode" @change="codeErr=false" style="width: 180px;"></el-input>
					  	<div class="inline-block checkCode" @click="changeCode">
					  		<img :src="codeImg" width="100%" height="100%"/></div>
					  </el-form-item>
					</el-form>
					<span class="errorMsg" v-show="showMsg">{{errorMsg}}</span>
					<el-button type="primary" :loading="loading" @click="login()" style="width: 100%;margin-top: 15px;">登录</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
   import { getData } from '../common/js/public.js'
	export default {
		name: 'login',
		data () {	
			let checkUser = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('请输入用户名'));
		        } else {
	              callback();
	            }
		  	};
		  	let checkPwd = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('请输入密码'));
		        } else {
	              callback();
	            }
		  	};
		  	let checkCode = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('请输入验证码'));
		        } else {
	              callback();
	            }
		  	};
			return {
				formInline: {
					userCode: '',
					password: '',
					validationCode: ''
				},
				codeImg: '/gplus/login/createValidationCode',
				errorMsg: '',
				codeErr: false,
				userErr: false,
				loading: false,
				rules: {
		          userCode: [
		          	{ validator: checkUser, trigger: 'blur' }
		          ],
		          password: [
		            { validator: checkPwd, trigger: 'blur' }
		          ],
		          validationCode: [
		            { validator: checkCode, trigger: 'blur' }
		          ]
		        }
			}
		},
		methods: {
			login () {				
				this.$refs.loginForm.validate((valid) => {
		          if (valid) {
		          	this.loading = true;
		          	let opt = {
							url: '/gplus/login/login',
							data: this.formInline,
							success: (res) => {
								let data = res.data.UserVO
								sessionStorage.token = data.token;	
								sessionStorage.userName = data.userName;	
								sessionStorage.userId = data.userId;	
								this.$router.push({path: 'home'});
							},
							fail: (res) => {	
								this.loading = false;
								this.showMsg = true;
								if (res.code == 7777) {
									this.codeErr = true;
								} else if (res.code == 9999) {
									this.userErr = true;
								} else {
									this.$alert(res.msg, '提示', {
										confirmButtonText: '确定'
									});
								}
								this.errorMsg = res.msg;
							}
					};
					getData(opt);
		          } else {
		            return false;
		          }
		        });				
			},
			changeCode () {
				let st = new Date();
				this.codeImg = '/gplus/login/createValidationCode?' + st.getTime();
			}
		},
		created () {
			sessionStorage.clear();	
		},
		computed: {
			showMsg () {
				if (this.codeErr && this.userErr) {
					return true;
				} else if (!this.codeErr && !this.userErr) {
					return false;
				} else {
					return true;
				}
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
.login
	background: url("../assets/img/login_bg.png") no-repeat center/cover;
	height: 100%;
	width: 100%;
	.middle		
		position: relative;
		margin: 0px auto;
		padding-top: 100px;
		.header
			font-family: MicrosoftYaHei-Bold;
			font-size: 38px;
			color: #D8E2FF;
			letter-spacing: 3.62px;
			text-align: center;
			img
				vertical-align: middle;
				margin-top: -5px;
		.content
			width: 360px;
			background: #F9FAFC;
			border: 1px solid #4A90E2;
			box-shadow: 0 0 20px 0 rgba(0,0,0,0.20);
			border-radius: 4px;
			margin: 50px auto 0;
			.title
				height: 60px;
				line-height: 60px;
				padding-left: 30px;
				font-family: MicrosoftYaHei-Bold;
				font-size: 18px;
				color: #FFFFFF;
				letter-spacing: 0;
				background-image: linear-gradient(-179deg, #0099FA 0%, #0085DA 100%);
				border-radius: 4px 4px 0 0;
			.loginForm
				padding: 30px;	
				position: relative;			
				.checkCode
					width: 116px;
					float: right;
					text-align: center;
					height: 36px;
					overflow: hidden;
				.errorMsg
					position: absolute;
					font-size: 12px;
					color: #FF4949;
					bottom: 77px;
</style>
